<template>
  <div class="login">
    <a-form
      class="form"
      :model="form"
      :style="{ width: '600px' }"
      @submit="handleSubmit"
    >
      <a-form-item
        field="userAccount"
        label="帐号"
        validate-trigger="input"
        required
      >
        <a-input v-model="form.userAccount" placeholder="请输入帐号" />
        <template #extra>
          <div></div>
        </template>
      </a-form-item>
      <a-form-item
        field="userPassword"
        label="密码"
        validate-trigger="input"
        required
      >
        <a-input-password
          v-model="form.userPassword"
          placeholder="请输入密码"
        />
        <template #extra>
          <div></div>
        </template>
        <template #help>
          <div></div>
        </template>
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { UserControllerService, UserLoginRequest } from "../../../generated";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();

const form = reactive({
  userAccount: "",
  userPassword: "",
} as UserLoginRequest);

const handleSubmit = async () => {
  const res = await UserControllerService.userLoginUsingPost(form);
  if (res.code === 0) {
    const res = await store.dispatch("user/getLoginUser");
    console.log("结果" + res);
    router.push({
      path: "/",
      replace: true,
    });
  } else {
    alert("登录失败" + res.message);
  }
};
</script>
<style>
.login {
  border: gainsboro solid 2px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2),
    0 6px 20px rgba(0, 123, 255, 0.19);
}

.form {
  padding: 50px;
  background: gainsboro;
}
</style>
